// 封装的通用方法实现数据的懒加载
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export const useLazyData = (apiFn) => {
  // target表示组件的最外层div元素
  const target = ref(null)
  //   懒加载接口返回的数据
  const result = ref([])
  // 监听组件是否进入可视区
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    if (isIntersecting) {
      // 被监听的DOM进入了可视区:此时调用接口获取数据；停止继续监听
      stop()
      //   因为多个地方需要使用所以传了个参apiFn
      apiFn().then((data) => {
        result.value = data.result
      })
    }
  }, {
    // 配置被监听的DOM进入可视区多少距离后触发回调（默认值大于零的）
    threshold: 0
  })
  //   result表示接口懒加载获取的业务数据
  //   target表示被监听的DOM元素，需要在模板中被ref属性绑定
  return { result, target }
}
